<template>
  <div class="app-container">
    <div class="block">项目名称</div>
    <el-input v-model="form.name" placeholder="请输入项目的名称"></el-input>

    <div class="block">项目描述（每一项描述以英文逗号分隔）</div>
    <el-input
      type="textarea"
      :rows="5"
      v-model="form.description"
      placeholder="请输入项目的描述"
    ></el-input>

    <div class="block">项目链接</div>
    <el-input v-model="form.url" placeholder="请输入项目的链接"></el-input>

    <div class="block">github地址</div>
    <el-input v-model="form.github" placeholder="请输入项目的 github 地址"></el-input>

    <div class="block">项目预览图</div>
    <Upload :src="form.thumb" @upload-success="handleUploadSuccess" />

    <div class="block">项目等级</div>
    <el-select v-model="form.order" placeholder="请选择项目等级">
      <el-option label="1" value="1"></el-option>
      <el-option label="2" value="2"></el-option>
      <el-option label="3" value="3"></el-option>
      <el-option label="4" value="4"></el-option>
      <el-option label="5" value="5"></el-option>
      <el-option label="6" value="6"></el-option>
    </el-select>

    <el-button
      style="margin-top: 20px; display: block"
      type="primary"
      @click="handleAddProject"
      >发布项目</el-button
    >
  </div>
</template>

<script>
import Upload from "@/components/Upload";
import { addProject } from "@/api/project.js";

export default {
  data() {
    return {
      form: {
        name: "",
        description: "",
        github: "",
        thumb: "",
        order: 1,
      },
    };
  },
  components: {
    Upload,
  },
  methods: {
    handleUploadSuccess(url) {
      this.form.thumb = url;
    },
    async handleAddProject() {
      const obj = {
        ...this.form,
      };
      obj.description = obj.description.split(",");
      obj.order = Number(obj.order);
      await addProject(obj);
      this.$message.success("添加成功");
      this.$router.push("/project/projectlist");
    },
  },
};
</script>

<style scoped lang="scss">
.block {
  margin: 15px 0;
}
</style>